<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘宝网-淘！我喜欢</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="icon" href="favicon.ico">
    <base target="_blank">
</head>

<body>
    <!-- 头部信息 -->
    <div id="headMessage" class="clearfix layer">
        <ul class="fl">
            <li>
                <span>中国大陆</span>
                <span class="iconfont arrow">&#xe602;</span>
            </li>
            <li>
                <a href="" class="login mr7">亲，请登录</a>
                <a href="">免费注册</a>
            </li>
            <li>
                <a href="">手机逛淘宝</a>
            </li>
        </ul>

        <ul class="fr">
            <li>
                <a href="">我的淘宝</a>
                <span class="iconfont arrow">&#xe602;</span>
            </li>
            <li>
                <span class="iconfont mr5 c4">&#xe606;</span>
                <a href="">购物车</a>
                <strong>0</strong>
                <span class="iconfont arrow">&#xe602;</span>
            </li>
            <li><a href=""><span class="iconfont mr5 stroe">&#xe631;</span>收藏夹</a>
                <span class="iconfont arrow ">&#xe602;</span>
            </li>
            <li>
                <a href="">商品分类</a>
            </li>
            <li class="line">|</li>
            <li>
                <a href="">千牛卖家中心</a>
                <span class="iconfont arrow">&#xe602;</span>
            </li>
            <li>
                <a href="">联系客服</a>
                <span class="iconfont arrow">&#xe602;</span>
            </li>
            <li>
                <span class="iconfont c4 mr5">&#xe603;</span>
                <a href="">网站导航</a>
                <span class="iconfont arrow">&#xe602;</span>
            </li>
        </ul>
    </div>
    <!-- 头部广告 -->
    <div id="headAd">
        <div class="img layer">
            <img src="img/taoxiaopu.png" alt="">
        </div>

    </div>
    <!-- 头部搜索 -->
    <div id="headSearch">
        <div class="clearfix layer">
            <h1 class="fl"><a href="">淘宝网</a></h1>
            <div class="code fr">
                <span class="iconfont close">&#xe6ed;</span>
                <span class="c5">手机淘宝</span>
                <img src="img/code.png" alt="">
            </div>
            <div class="search">
                <ul class="searchTab clearfix ">
                    <li class="active">宝贝</li>
                    <li>天猫</li>
                    <li>店铺</li>
                </ul>
                <div class="searchContent clearfix ">
                    <form action="">
                        <div class="searchBox fl">
                            <input type="text">
                            <div class=" placeholder">
                                <i class="iconfont">&#xe609;</i>
                                <span>眼镜显脸小</span>
                            </div>
                            <span class="iconfont imgSearch">&#xe612;</span>
                        </div>
                        <div class="btn fl">
                            <button type="submit">搜索</button>
                        </div>
                    </form>
                </div>
                <div class="hotKey">
                    <a href="">新款连衣裙</a>
                    <a href="">四件套</a>
                    <a href="" class="c5">潮流T恤</a>
                    <a href="">时尚女鞋</a>
                    <a href="">短裤</a>
                    <a href="">半身裙</a>
                    <a href="">男士外套</a>
                    <a href="">墙纸</a>
                    <a href="">行车记录仪</a>
                    <a href="">新款男鞋</a>
                    <a href="">耳机</a>
                    <a href="">时尚女包</a>
                    <a href="">沙发</a>
                </div>
            </div>

        </div>
    </div>
    <!-- 导航 -->
    <div id="nav" class="clearfix layer">
        <h2 class="fl">主题市场</h2>
        <ul>
            <li class="size"><a href=""><span class="iconfont tbz tbz1">&#xe600;</span>天猫</a></li>
            <li class="size"><a href=""><span class="iconfont tbz tbz2">&#xe600;</span>聚划算</a></li>
            <li class="size"><a href=""><span class="iconfont tbz tbz3">&#xe600;</span>天猫超市</a></li>
            <li class="line">|</li>
            <li><a href=""><span class="iconfont tbz ">&#xe600;</span>淘抢购</a></li>
            <li><a href=""><span class="iconfont tbz ">&#xe600;</span>电器城</a></li>
            <li><a href=""><span class="iconfont tbz">&#xe600;</span>司法拍卖</a></li>
            <li><a href=""><span class="iconfont tbz">&#xe600;</span>淘宝心选</a></li>
            <li><a href=""><span class="iconfont tbz">&#xe600;</span>兴农脱贫</a></li>
            <li class="line">|</li>
            <li><a href=""><span class="iconfont tbz">&#xe600;</span>飞猪旅行</a></li>
            <li><a href=""><span class="iconfont tbz">&#xe600;</span>智能生活</a></li>
            <li><a href=""><span class="iconfont tbz">&#xe600;</span>苏宁易购</a></li>
        </ul>
    </div>
    <!-- 首屏内容 -->
    <div id="firstScreen" class="clearfix layer">
        <!-- 左边的内容 -->
        <div class="firstLeft fl">
            <!-- 侧边导航 -->
            <div class="sideNav fl">
                <ul>
                    <li>
                        <a href="#">女装</a> / <a href="#">男装</a> / <a href="#">内衣</a><span
                            class="iconfont fr">&#xe604;</span>
                    </li>
                    <li>
                        <a href="#">鞋靴</a> / <a href="#">箱包</a> / <a href="#">配件</a><span
                            class="iconfont fr">&#xe604;</span>
                    </li>
                    <li>
                        <a href="#">童装玩具</a> / <a href="#">孕产</a> / <a href="#">用品</a><span
                            class="iconfont fr">&#xe604;</span>
                    </li>
                    <li>
                        <a href="#">家电</a> / <a href="#">数码</a> / <a href="#">手机</a><span
                            class="iconfont fr">&#xe604;</span>
                    </li>
                    <li>
                        <a href="#">美妆</a> / <a href="#">洗护</a> / <a href="#">保健品</a><span
                            class="iconfont fr">&#xe604;</span>
                    </li>
                    <li>
                        <a href="#">珠宝</a> / <a href="#">眼镜</a> / <a href="#">手表</a><span
                            class="iconfont fr">&#xe604;</span>
                    </li>
                    <li>
                        <a href="#">运动</a> / <a href="#">户外</a> / <a href="#">乐器</a><span
                            class="iconfont fr">&#xe604;</span>
                    </li>
                    <li>
                        <a href="#">游戏</a> / <a href="#">动漫</a> / <a href="#">影视</a><span
                            class="iconfont fr">&#xe604;</span>
                    </li>
                    <li>
                        <a href="#">美食</a> / <a href="#">生鲜</a> / <a href="#">零食</a><span
                            class="iconfont fr">&#xe604;</span>
                    </li>
                    <li>
                        <a href="#">鲜花</a> / <a href="#">宠物</a> / <a href="#">农资</a><span
                            class="iconfont fr">&#xe604;</span>
                    </li>
                    <li>
                        <a href="#">工具</a> / <a href="#">装修</a> / <a href="#">建材</a><span
                            class="iconfont fr">&#xe604;</span>
                    </li>
                    <li>
                        <a href="#">家具</a> / <a href="#">家饰</a> / <a href="#">家纺</a><span
                            class="iconfont fr">&#xe604;</span>
                    </li>
                    <li>
                        <a href="#">汽车</a> / <a href="#">二手车</a> / <a href="#">用品</a><span
                            class="iconfont fr">&#xe604;</span>
                    </li>
                    <li>
                        <a href="#">办公</a> / <a href="#">DIY</a> / <a href="#">五金电子</a><span
                            class="iconfont fr">&#xe604;</span>
                    </li>
                    <li>
                        <a href="#">百货</a> / <a href="#">餐厨</a> / <a href="#">家庭保健</a><span
                            class="iconfont fr">&#xe604;</span>
                    </li>
                    <li>
                        <a href="#">学习</a> / <a href="#">卡券</a> / <a href="#">本地服务</a><span
                            class="iconfont fr">&#xe604;</span>
                    </li>
                </ul>
            </div>

            <!-- 图片1容器 -->
            <div class="img1Box fr">
                <div class="pic fl">
                    <div class="img">
                        <a href=""><img src="img/pic1.webp" alt=""></a>
                    </div>
                    <button class="iconfont leftBtn">&#xe69f;</button>
                    <button class="iconfont rightBtn">&#xe604;</button>
                    <div class="circle">
                        <span class="active"></span><span></span><span></span><span></span><span></span>
                    </div>
                </div>
                <div class="ad fr">
                    <a href=""><img src="img/ad1.webp" alt=""></a>
                </div>
            </div>
            <!-- 图片2容器 -->
            <div class="img2Box fr">
                <div class="pic fl">
                    <div class="picTitle">
                        <div class="text clearfix">
                            <span class="fl bg">理想生活上天猫</span>
                            <span class="fr"><i>1</i>/6</span>
                        </div>
                        <div class="line">
                            <span></span>
                        </div>
                    </div>

                    <div class="img">
                        <a href=""><img src="img/pic2.jpg" alt=""></a>
                        <a href=""><img src="img/pic3.jpg" alt=""></a>
                    </div>
                    <button class="iconfont leftBtn">&#xe69f;</button>
                    <button class="iconfont rightBtn">&#xe604;</button>

                </div>
                <div class="ad fr">
                    <p class="title">今日热卖</p>
                    <a href=""><img src="img/ad2.jpg" alt=""></a>
                </div>
            </div>

            <!-- 淘宝头条 -->
            <div class="news fl">
                <div class="hd fl">
                    <h3>淘宝头条</h3>
                    <p>让你的生活更有趣</p>
                </div>
                <div class="newList fr">
                    <div class="imtem">
                        <a href="#" class="fl img"><img src="img/news_img_01.jpg" alt=""></a>
                        <h4><a href="#">微漫酱访谈第三期：超萌舞见弥音音！</a></h4>
                        <p><a href="#">哈喽，大家好，我是你们可爱的微漫酱，今天我们请到了一位舞见小姐姐来做客我们的访谈事，她就是弥音音！</a></p>
                        <a href="#" class="more">更多></a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右边的内容 -->
        <div class="firstRight fr">
            <!-- 用户 -->
            <div class="user">
                <a href="" class="avatar"><img src="img/avatar.jpg" alt=""></a>
                <p class="username">Hi! 你好</p>
                <p class="members">
                    <a href="" class="gold">领淘金币抵钱</a>
                    <a href="" class="club">会员俱乐部</a>
                </p>
                <div class="btn">
                    <button class="login">登录</button>
                    <button class="register">注册</button>
                    <button class="shop">开店</button>
                </div>
            </div>
            <!-- 举报 -->
            <a href="" class="tipOff">
                <span>网上有害信息举报专区</span>
                <i class="iconfont">&#xe60d;</i>
            </a>
            <!-- 公告区 -->
            <div class="notice">
                <ul class="title">
                    <li class="active"><a href="">公告</a></li>
                    <li><a href="">规则</a></li>
                    <li><a href="">论坛</a></li>
                    <li><a href="">安全</a></li>
                    <li><a href="">公益</a></li>
                </ul>
                <ul class="content clearfix">
                    <li class="item1"><a href="">95公益周阿里、腾讯等六家公司同台联合做公益</a></li>
                    <li><a href="">淘宝造物节之城市秘密</a></li>
                    <li><a href="">聚划算88红包省钱卡</a></li>
                </ul>
            </div>
            <!-- 图标区域 -->
            <table class="icon">
                <tr>
                    <td class="item1">
                        <a href="#">
                            <span></span>
                            <i>充话费</i>
                        </a>
                    </td>
                    <td class="item2">
                        <a href="#">
                            <span></span>
                            <i>旅行</i>
                        </a>
                    </td>
                    <td class="item3">
                        <a href="#">
                            <span></span>
                            <i>车险</i>
                        </a>
                    </td>
                    <td class="item4">
                        <a href="#">
                            <span></span>
                            <i>游戏</i>
                        </a>
                    </td>
                </tr>
                <tr>
                    <td class="item5">
                        <a href="#">
                            <span></span>
                            <i>彩票</i>
                        </a>
                    </td>
                    <td class="item6">
                        <a href="#">
                            <span></span>
                            <i>电影</i>
                        </a>
                    </td>
                    <td class="item7">
                        <a href="#">
                            <span></span>
                            <i>酒店</i>
                        </a>
                    </td>
                    <td class="item8">
                        <a href="#">
                            <span></span>
                            <i>理财</i>
                        </a>
                    </td>
                </tr>
                <tr>
                    <td class="item9">
                        <a href="#">
                            <span></span>
                            <i>找服务</i>
                        </a>
                    </td>
                    <td class="item10">
                        <a href="#">
                            <span></span>
                            <i>演出</i>
                        </a>
                    </td>
                    <td class="item11">
                        <a href="#">
                            <span></span>
                            <i>水电煤</i>
                        </a>
                    </td>
                    <td class="item12">
                        <a href="#">
                            <span></span>
                            <i>火车票</i>
                        </a>
                    </td>
                </tr>
            </table>
            <!-- APP -->
            <div class="app">
                <div class="title clearfix">
                    <h3 class="fl">阿里APP</h3>
                    <a href="" class="fr">更多</a>
                </div>
                <div class="appIcon">
                    <li><a href=""><img src="img/app_01.webp" alt=""></a></li>
                    <li><a href=""><img src="img/app_02.png" alt=""></a></li>
                    <li><a href=""><img src="img/app_03.png" alt=""></a></li>
                    <li><a href=""><img src="img/app_04.png" alt=""></a></li>
                    <li><a href=""><img src="img/app_05.png" alt=""></a></li>
                    <li><a href=""><img src="img/app_06.png" alt=""></a></li>
                    <li><a href=""><img src="img/app_07.jpg" alt=""></a></li>
                    <li><a href=""><img src="img/app_08.png" alt=""></a></li>
                    <li><a href=""><img src="img/app_09.png" alt=""></a></li>
                    <li><a href=""><img src="img/app_10.png" alt=""></a></li>
                </div>
            </div>
        </div>
    </div>
    <!-- 有好货与爱逛街 -->
    <div class="layer">
        <!-- 有好货 -->
        <div class="goods fl">
            <div class="head clearfix mt10">
                <h3 class="fl">
                    <img src="img/goods.png" alt="有好货">
                    <span class="iconfont">&#xe607;</span>
                    <i>与品质生活不期而遇</i>
                </h3>
                <a href="" class="change fr">换一换</a>
            </div>
            <ul class="list">
                <li>
                    <a href=""><img src="img/goods1.webp" alt=""></a>
                    <h4><a href="">圣罗兰 口红礼盒</a></h4>
                    <p><a href="">多款色号多种选择，轻松打造出美丽的唇妆。</a></p>
                    <a href="" class="comment">
                        <span class="iconfont">&#xe601;</span><i>8 人说好</i>

                    </a>
                </li>
                <li>
                    <a href=""><img src="img/goods1.webp" alt=""></a>
                    <h4><a href="">圣罗兰 口红礼盒</a></h4>
                    <p><a href="">多款色号多种选择，轻松打造出美丽的唇妆。</a></p>
                    <a href="" class="comment">
                        <span class="iconfont">&#xe601;</span><i>8 人说好</i>

                    </a>
                </li>
                <li>
                    <a href=""><img src="img/goods1.webp" alt=""></a>
                    <h4><a href="">圣罗兰 口红礼盒</a></h4>
                    <p><a href="">多款色号多种选择，轻松打造出美丽的唇妆。</a></p>
                    <a href="" class="comment">
                        <span class="iconfont">&#xe601;</span><i>8 人说好</i>

                    </a>
                </li>
                <li>
                    <a href=""><img src="img/goods1.webp" alt=""></a>
                    <h4><a href="">圣罗兰 口红礼盒</a></h4>
                    <p><a href="">多款色号多种选择，轻松打造出美丽的唇妆。</a></p>
                    <a href="" class="comment">
                        <span class="iconfont">&#xe601;</span><i>8 人说好</i>

                    </a>
                </li>
                <li>
                    <a href=""><img src="img/goods1.webp" alt=""></a>
                    <h4><a href="">圣罗兰 口红礼盒</a></h4>
                    <p><a href="">多款色号多种选择，轻松打造出美丽的唇妆。</a></p>
                    <a href="" class="comment">
                        <span class="iconfont">&#xe601;</span><i>8 人说好</i>

                    </a>
                </li>
                <li>
                    <a href=""><img src="img/goods1.webp" alt=""></a>
                    <h4><a href="">圣罗兰 口红礼盒</a></h4>
                    <p><a href="">多款色号多种选择，轻松打造出美丽的唇妆。</a></p>
                    <a href="" class="comment">
                        <span class="iconfont">&#xe601;</span><i>8 人说好</i>

                    </a>
                </li>
            </ul>
        </div>
        <!-- 爱逛街 -->
        <div class="goods fl shopping">
            <div class="head clearfix mt10">
                <h3 class="fl">
                    <img src="img/shopping.png" alt="爱逛街">
                    <span class="iconfont">&#xe607;</span>
                    <i>献给聪明可爱的你</i>
                </h3>
                <a href="" class="change fr">换一换</a>
            </div>
            <ul class="list">
                <li>
                    <a href=""><img src="img/goods1.webp" alt=""></a>
                    <p>
                        <span class="iconfont">&#xe608;</span>
                        <a href="">今秋外套穿什么，复古民族风毛衣外套一件搞定</a>
                    </p>
                    <a href="" class="comment">
                        <span><img src="img/small_avatar.png" alt=""></span>
                        <i>十***全</i>

                    </a>
                </li>
                <li>
                    <a href=""><img src="img/goods1.webp" alt=""></a>
                    <p>
                        <span class="iconfont">&#xe608;</span>
                        <a href="">今秋外套穿什么，复古民族风毛衣外套一件搞定</a>
                    </p>
                    <a href="" class="comment">
                        <span><img src="img/small_avatar.png" alt=""></span>
                        <i>十***全</i>

                    </a>
                </li>
                <li>
                    <a href=""><img src="img/goods1.webp" alt=""></a>
                    <p>
                        <span class="iconfont">&#xe608;</span>
                        <a href="">今秋外套穿什么，复古民族风毛衣外套一件搞定</a>
                    </p>
                    <a href="" class="comment">
                        <span><img src="img/small_avatar.png" alt=""></span>
                        <i>十***全</i>

                    </a>
                </li>
                <li>
                    <a href=""><img src="img/goods1.webp" alt=""></a>
                    <p>
                        <span class="iconfont">&#xe608;</span>
                        <a href="">今秋外套穿什么，复古民族风毛衣外套一件搞定</a>
                    </p>
                    <a href="" class="comment">
                        <span><img src="img/small_avatar.png" alt=""></span>
                        <i>十***全</i>

                    </a>
                </li>
                <li>
                    <a href=""><img src="img/goods1.webp" alt=""></a>
                    <p>
                        <span class="iconfont">&#xe608;</span>
                        <a href="">今秋外套穿什么，复古民族风毛衣外套一件搞定</a>
                    </p>
                    <a href="" class="comment">
                        <span><img src="img/small_avatar.png" alt=""></span>
                        <i>十***全</i>

                    </a>
                </li>
                <li>
                    <a href=""><img src="img/goods1.webp" alt=""></a>
                    <p>
                        <span class="iconfont">&#xe608;</span>
                        <a href="">今秋外套穿什么，复古民族风毛衣外套一件搞定</a>
                    </p>
                    <a href="" class="comment">
                        <span><img src="img/small_avatar.png" alt=""></span>
                        <i>十***全</i>

                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 右侧固定定位导航 -->
    <div id="tool">
		<span class="iconfont">&#xe605;</span>
		<div class="btn">
			<a href="#" class="c4 active">爱逛 好货</a>
			<a href="#" class="c5">好店 直播</a>
			<a href="#" class="c6">品质 特色</a>
			<a href="#" class="c7">实惠 热卖</a>
			<a href="#" class="c4">猜你 喜欢</a>
			<a href="#" class="item6">反馈</a>
			<a href="#" class="">暴恐 举报</a>
		</div>
	</div>
    </div>
</body>

</html>